<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-waves
        type="success"
        icon="el-icon-download"
        class="filter-item"
        size="small"
        plain
        :loading="listLoading"
        @click="handleExport"
      >导出 Excel</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      :border="false"
      fit
      style="width: 100%;"
    >
      <el-table-column label="ID" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="180">
        <template slot-scope="{row}">
          <el-input v-model.trim="row.name" disabled />
        </template>
      </el-table-column>
      <el-table-column label="显示名称">
        <template slot-scope="{row}">
          <el-input v-model.trim="row.display" />
        </template>
      </el-table-column>
      <el-table-column label="KEY" width="120">
        <template slot-scope="{row}">
          <el-input v-model.trim="row.key" disabled />
        </template>
      </el-table-column>
      <el-table-column label="VALUE" width="120">
        <template slot-scope="{row}">
          <el-input v-model.trim="row.value" disabled />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        fixed="right"
      >
        <template slot-scope="{ row }">
          <el-button type="success" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">
            保存
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import api from '@/api'

export default {
  name: 'MemberLevel',
  directives: { waves },
  data() {
    return {
      listLoading: false,
      list: []
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * 获取数据列表
     */
    getList() {
      this.listLoading = true
      api.member.levelList().then(response => {
        const { data } = response
        this.list = data
      }).finally(() => {
        this.listLoading = false
      })
    },
    /**
     * 修改
     * @param row
     */
    handleUpdate(row) {
      api.member.levelEdit({ ...row }).then(() => {
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 3 * 1000
        })
      })
    },
    /**
     * 导出
     */
    async handleExport() {
      const formatJson = (filterVal, jsonData) => {
        return jsonData.map(v => filterVal.map(j => {
          return v[j]
        }))
      }
      this.listLoading = true
      const response = await api.member.levelList({ export: true })
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['ID', '名称', '显示', 'KEY', 'VALUE']
        const filterVal = ['id', 'name', 'display', 'key', 'value']
        const list = response.data
        const data = formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '等级列表'
        })
      })
      this.listLoading = false
    }
  }
}
</script>
